<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-29 08:53:53
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-17 08:45:35
 * @FilePath: \B2B\ebuy\src\components\Header\Search.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
    <div class="search">
        <el-header class="secondTop">
            <div class="logo">
                <router-link to="/" class="router">
                    <img src="@/assets/logo.png" alt />
                </router-link>
            </div>
            <div class="so">
                <el-input class="content"  
                    placeholder="请输入搜索内容"
                    v-model="inputText"/>
                <el-button class="input" icon="el-icon-search" plain
                    @click="toSearch">
                    搜索
                </el-button>
            </div>
        </el-header>
    </div>
</template>

<script>
export default {
    name: 'Search',
    data() {
        return {
            inputText: '',
        }
    },
    watch: {
        inputText(newVal, old) {
            if (newVal == "") return;
            else this.toSearch();
        },
    },
    methods: {
        // 跳转到供应大厅
        toSearch() {
            if(this.inputText=="") return this.$message.error("搜索内容不能为空");
            this.$router.push({
                path: '/Goods',
                query: {
                    text: this.inputText
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.search{
    width: 100%;
    background-color: @color-theme2;
    .secondTop{
        width: @width-content;
        margin: 0 auto;
        min-height: 170px;
        display: flex;
        justify-content: space-around;
        .logo{
            .router{
                img{
                    height: 100px;
                    width: 130px;
                }
            }
        }
        .so{
            padding-top: 25px;
            .content {
                height: 40px;
                width: 500px;
            }
        }
    }
}
</style>